.indexContainer{
    swiper{
        width: 100%;
        height: 300rpx;
        swiper-item{
            width: 100%;
            height: 100%;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    /*五个导航图标样式*/
    .navContainer{
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        .navItem{
            display: flex;
            width: 20%;
            height: 200rpx;
            flex-flow: column nowrap;
            align-items: center;
            .iconfont{
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                text-align: center;
                line-height: 100rpx;
                background: rgb(240,19,19);
                font-size: 50rpx;
                color: #fff;
                margin: 20rpx 0;
            }
            text{
                font-size: 26rpx;
            }
        }
    }

    .recommendContainer{
        padding: 20rpx;
        /*内容区*/
        .recommendScroll{
            display: flex;
            width: 100%;
            flex-flow: row nowrap;
            height: 300rpx;
            .scrollItem{
                margin-top: 10rpx;
                margin-right: 10rpx;
                width: 200rpx;
                image{
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
                .desc{
                    font-size: 26rpx;
                    /*多行文本溢出隐藏，省略号代替*/
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp: 2;
                    
                }
            }

        }
    }
    .topList{
        padding: 20rpx;
        .topListContainer{
            height: 450rpx;
            swiper-item{
                margin-top: 30rpx;
                width: 96%;
                .title{
                    font-size: 26rpx;
                }
                .musicItem{
                    display: flex;
                    margin-top: 20rpx;
                    flex-flow: row nowrap;
                    align-items: center;
                    image{
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 10rpx;
                    }
                    .count{
                        font-weight: bold;
                        margin: 0 40rpx;
                    }
                }
            }
        }
    }
}
